<template>

  <div class="manage-img">
    <el-row>
      <el-col :span="9">
        <div class="common-table"   >
          <!-- 用户数据Table -->
          <el-table :data="tableData" stripe >
            <el-table-column prop="sername" label="名称">
            </el-table-column>
            <el-table-column prop="id" label="id">
            </el-table-column>

            <!-- 自定义列 -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handleEdit1(scope.row)">识别</el-button>

              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handleEdit2(scope.row)">预览</el-button>

              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pager">
            <el-pagination
                :page-size="10"
                :pager-count="10"
                layout="prev, pager, next"
                :total="total"
                @current-change="currentChange"
            >
            </el-pagination>
          </div>

        </div>

      </el-col>

      <el-col :span="15">
        <div>
          <el-image  :src="imgUrl" style="margin-top: 6%" class="rightimg">
          </el-image>
        </div>




      </el-col>
    </el-row>

  </div>



</template>

<script>


import {getImgList,idfyImg} from "@/api";
import LivePlayer from '@liveqing/liveplayer'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    LivePlayer
  },
  data () {
    return {
      imgUrl:'',
      form: {
        id: '',
        name: '',
        addr: '',
        num: '',
        is: ''
      },
      tableData: [],
      pageData: {
        pageNum: 1,
        pageSize:11,
      },
      total: 0,
    }
  },

  methods : {
    handleEdit1(row) {
      // console.log(this.videoUrl)
      this.imgUrl=''
      idfyImg({params:{id:row.id}})
      this.imgUrl = 'http://localhost:9091/images/idenfy/img'+ row.id+".png";
      console.log(this.imgUrl);

    },
    handleEdit2(row) {
      // console.log(this.videoUrl)
      this.imgUrl=''
    //  idfyImg({params:{id:row.id}})
      this.imgUrl ='http://localhost:9091/images/'+row.name
      console.log(this.imgUrl);

    },
    currentChange(val) {
      this.pageData.pageNum=val;
      this.getList()
    },
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      getImgList({ params: { ...this.pageData }  }).then((data) => {
        this.tableData = data.data.data.list
        //  console.log( data.data.data.list)
        this.total = data.data.data.total|| 0
        // console.log(this.total)
      })
    },
  },
  mounted: function () {
    this.getList()

  },

}
</script>

<style>
.manage-img {
  height: 100%;
  overflow-y: auto;
}
.common-table {
  height: 80vh;
  position: relative;
  .pager {
    position: relative;
    bottom: 0px;
  }
}
.rightimg{
  height: 80vh;

}

</style>